<!--
 @description 自定义页面
 @fileName index.vue
 @author zengqiongying
 @created 2022/12/28 13:24:51
-->
<template>
  <div class="custom-page" :style="{'padding-top':isInline?'0px':'44PX'}">
    <MineHeader v-if="!isInline" arrow :title="pageName" />
    <div v-if="tabList.length>0" class="floor-tabs" :style="{'top':`${isInline?offTop:44}px`}">
      <Scroll ref="scroll" horizontal class="scoll-content">
        <div ref="tabs" class="tas">
          <div
            v-for="(item,i) in tabList"
            :key="i"
            :class="['tab-item',{'active':item.id===activeFloorId}]"
            @click="clickTabHande(item)"
          >{{ item.name }}</div>
        </div>
      </Scroll>
    </div>
    <div class="page-content" :class="{'no-anchor':tabList.length===0}">
      <List
        ref="list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <van-index-bar slot="list" ref="indexBar" :sticky-offset-top="isInline?offTop+60:104" :index-list="barIndexList" @change="handleBarChange">
          <div v-for="(floor,index) in floorList" :key="index">
            <van-index-anchor :index="floor.id" />
            <template v-if="floor.type==='define_page_picture' && floor.layOut==='fourColumnScroll'">
              <!-- <div class="floor-swiper-box">
                <SwiperFloor :list="floor.picDetailList" />
              </div> -->
              <Scroll horizontal class="scoll-content">
                <div class="floor-list-scroll">
                  <ContentItem
                    v-for="(g,i) in floor.picDetailList"
                    :key="i"
                    :src="g.pic"
                    :name="g.name"
                    :layout-code="floor.layOut"
                    :host="floorPicPrefix"
                    @click="clickPictureHandle(g)"
                  />
                </div>
              </Scroll>
            </template>
            <div v-else class="floor-list">
              <template v-if="floor.type==='define_page_picture'">
                <ContentItem
                  v-for="(g,i) in floor.picDetailList"
                  :key="i"
                  :src="g.pic"
                  :name="g.name"
                  :layout-code="floor.layOut"
                  :host="floorPicPrefix"
                  @click="clickPictureHandle(g)"
                />
              </template>
              <template v-if="floor.type==='define_page_product'">
                <ContentItem
                  v-for="(g,i) in floor.productDetailList"
                  :key="i"
                  :src="g.picUrl"
                  :name="g.skuName"
                  :price="g.price"
                  is-product
                  :host="proPicPrefix"
                  :tag-list="g.sellingPoints || []"
                  @click="clickProductHandle(g.spuId,g.skuId)"
                />
              </template>
            </div>
          </div>
        </van-index-bar>
      </List>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import ContentItem from './ContentItem'
// import SwiperFloor from './SwiperFloor'
import Scroll from '@/components/Scroll'
import List from '@/components/PageList'
import commonMixin from './mixin'
export default {
  name: 'CustomPage',
  components: { List, MineHeader, ContentItem, Scroll },
  mixins: [commonMixin],
  props: {
    pageDetail: {
      // 页面详情数据 来源于 defineTab/Category
      type: Object,
      default: () => {}
    },
    isInline: {
      // 是否内嵌：true 内嵌
      type: Boolean,
      default: false
    },
    offTop: {
      // 距离顶部距离
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      pageId: this.$route.params.id || '',
      floorList: [],
      activeFloorId: '',
      floorPicPrefix: process.env.VUE_APP_STATIC,
      proPicPrefix: process.env.VUE_APP_GCENTER_STATIC,
      finished: false
    }
  },

  computed: {
    tabList() {
      const list = this.floorList.filter(v => [1, '1'].includes(v.isAnchor))
      return list
    },
    tabIndex() {
      let index = -1
      if (this.floorList.length > 0) {
        index = this.floorList.findIndex(v => v.id === this.activeFloorId)
      }
      return index
    },
    barIndexList() {
      return this.floorList.map(v => {
        return v.id
      })
    }
  },
  watch: {
    pageDetail: {
      handler(val, oldVal) {
        if (val) {
          this.pageId = val.id
          this.handleResData(val)
        }
      },
      immediate: true,
      deep: true
    },
    tabIndex(v) {
      if (v === -1 || !this.$refs.tabs) return

      const els = this.$refs.tabs.querySelectorAll('.tab-item')
      if (els[v]) {
        const left = els[v].offsetLeft
        const top = els[v].offsetTop
        this.$refs.scroll.scrollTo(left, top)
      }
    }
  },

  created() {
    /* if (this.pageId) {
      this.getContent(this.pageId)
    } */
    sessionStorage.removeItem('customSpuContent')
  },
  activated() {
    if (!this.isInline) {
      this.pageId = this.$route.params.id || ''
      this.$nextTick(() => {
        this.resetPageData()
      })
    }
  },
  mounted() {

  },
  beforeRouteLeave(to, from, next) {
    const names = ['HomeIndex', 'GoodsIndex', 'GoodsThreeNavList', 'CustomSpuProduct', 'DefineTabNavigation']
    if (names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
    }
    if (to.name !== 'CustomSpuProduct') {
      sessionStorage.removeItem('customSpuContent')
    }
    next()
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    resetData() {
      this.floorList = []
    },
    async load(page, rows) {
      if (this.isInline) {
        this.handleResData(this.pageDetail)
        return
      }
      return this.getCustomPageContent(false, (data) => {
        this.handleResData(data)
      })
    },
    handleResData(data) {
      if (!data) {
        this.finished = true
        return
      }
      const pageType = (data && data.type) || ''
      const floorList = data ? data.v2FloorList || [] : []
      if (pageType !== 'product') {
        this.floorList = floorList
      } else {
        // 商品展示类型
        if (floorList.length > 0) {
          const tmpObj = floorList[0]
          if (tmpObj.showType === 'SPU') {
            // SPU展示形式，存储页面配置便于SPU展示使用
            sessionStorage.setItem('customSpuContent', JSON.stringify(data))
            this.$router.replace({ path: `/customPage/${this.pageId}/spu/list` })
            return
          }
          this.floorList = [tmpObj]
        } else {
          this.floorList = []
        }
      }
      if (this.floorList.length > 0) {
        this.activeFloorId = this.floorList[0].id
      }
      this.finished = true
    },

    getContent(id) {
      /* getFullDefinePageById(id).then(res => {
        this.pageName = res.data ? res.data.name || '' : ''
        this.floorList = res.data ? res.data.v2FloorList || [] : []
        if (this.floorList.length > 0) {
          this.activeFloorId = this.floorList[0].id
        }
        this.finished = true
      }) */
    },
    clickTabHande(d) {
      this.activeFloorId = d.id
      this.$refs.indexBar.scrollTo(this.activeFloorId)
      // console.log('自定义页面Tab', this.activeFloorId)
    },
    handleBarChange(id) {
      this.activeFloorId = id
      // console.log('自定义页面IndexBar 点击', this.activeFloorId)
    },
    clickPictureHandle(g) {
      g.routerTitle = g.name
      this.$gotoPage(g, this.$router)
    },
    clickProductHandle(spuId, skuId) {
      /* const skuId = g.skuId
      const spuId = g.spuId */
      this.$router.push({
        name: 'FinishedDetail',
        params: { spuId, skuId }
      })
    }
  }
}

</script>
<style lang='less' scoped>
/deep/ .more-close{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
}
.custom-page{
  padding-top:44PX;
  padding-bottom: 16px;
}

.floor-tabs{
  position: fixed;
  z-index: 99;
  left: 0;
  top:44PX;
  width: 100%;
  height: 60PX;
  padding: 16PX 0 ;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  .scoll-content{
    width:100%;
    height: 28PX;
    box-sizing: border-box;
  }

  .tas{
    white-space: nowrap;
    display:flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 28PX;
  }
  .tab-more{
    position: fixed;
    z-index: 100;
    right: 0;
    top: 44PX;
    margin-top: 13PX;
    width: 49px;
    height: 34PX;
    background: linear-gradient(90deg, rgba(255,255,255,0.81) 0%, #FFFFFF 100%);
    filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow{
      width: 20px;
      height: 20px;
      background: #F5F5F5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon{
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.tab-item{
  margin-left: 12px;
  display: inline-block;
  padding: 0 12px;
  height: 28PX;
  line-height: 28PX;
  background: #FAFAFA;
  border-radius: 13px;
  color: #999999;
  font-size: 12px;
  white-space:nowrap;
  &.active{
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    background: #F5F5F5;
  }
}
.pop-content{
  min-height: 250px;
  .pop-tab-list{
    display: flex;
    flex-wrap: wrap;
    .tab-item{
      margin-bottom: 20px;
    }
  }
}
.page-content{
  // padding:0 16px;
  margin-top:60PX;
  &.no-anchor{
    margin-top: 0;
  }
  .floor-list{
    padding:0 16px;
    display: flex;
    flex-wrap: wrap;
  }
  .floor-swiper-box{
    position: relative;
    z-index: 1;
  }
  .floor-list-scroll{
    display:inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding:0 8px 0 16px;
    justify-content: flex-start;
  }
}
/deep/ .van-index-anchor{
  // display: none;
  height: 1px !important;
  visibility: hidden;
}
/deep/ .van-index-bar__sidebar{
  display: none;
}
</style>
